import React, { useState, useEffect } from "react";
import {
  PlusOutlined,
  EditOutlined,
  FileSearchOutlined,
  AuditOutlined,
} from "@ant-design/icons";
import type { SizeType } from "antd/es/config-provider/SizeContext";
import { Button, DatePicker, Input,Modal, Radio, Form,Table, Switch ,notification} from "antd";
import type { RadioChangeEvent } from "antd";
import "./index.scss";
import type { ColumnsType } from "antd/es/table";
import * as service from "../../../../api/cgg/worker";

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const SalMent = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const { RangePicker } = DatePicker;
  const { Search } = Input;
  function onOk(value: any) {
    console.log("onOk: ", value);
  }
  const [size, setSize] = useState<SizeType>("small");
  const onChange = (e: RadioChangeEvent) => {
    setSize(e.target.value);
  };
  var handleSerch = async (value: any) => {
    var res = await service.findAllWorkerByWorkerName({
      page: 1,
      limit: 10,
      workerName: value,
    });
    console.log(res);
    res.data.data.records.forEach((item: any, index: any) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };
  const columns: ColumnsType<DataType> = [
    {
      title: "操作",
      dataIndex: "name",
      render: () => (
        <div className="icons ">
          <FileSearchOutlined style={{ fontSize: 20 }} />
          <EditOutlined className="iconstyle" />
        </div>
      ),
    },
    {
      title: "业务员名称",
      dataIndex: "workerName",
    },
    {
      title: "电话号码",
      dataIndex: "workerTel",
    },
    {
      title: "状态",
      dataIndex: "WorkerState",
      render: (_: any, record: any, index: any) => (
        <Switch
          checked={record.workerState == 0 ? false : true}
          checkedChildren={record.userState}
          unCheckedChildren={record.userState}
        />
      ),
    },
    {
      title: "职位",
      dataIndex: "workerPosition",
    },
    {
      title: "代码",
      dataIndex: "workerCode",
    },
    {
      title: "区域",
      dataIndex: "workerAera",
    },

    {
      title: "添加日期",
      dataIndex: "workerAddtime",
    },
  ];
  const [data, setData] = useState([]);

  useEffect(() => {
    var Workerlist = async () => {
      var res = await service.findAllWorker({ page: 1, limit: 100 });
      console.log(res.data.data);
      res.data.data.records.forEach((item: any, index: any) => {
        item.key = index;
      });
      setData(res.data.data.records);
    };
    Workerlist();
  }, []);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  var hanldeAll = async () => {
    var res = await service.findAllWorkerByState({
      page: 1,
      limit: data.length,
      state: 1,
    });
    console.log(res.data);
    res.data.data.records.forEach((item: any, index: number) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };
  var hanldeAllOff = async () => {
    var res = await service.findAllWorkerByState({
      page: 1,
      limit:3,
      state: 0,
    });
    console.log(res.data);
    res.data.data.records.forEach((item: any, index: number) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };
  var Workerlist = async () => {
    var res = await service.findAllWorker({ page: 1, limit: 100 });
    console.log(res.data.data);
    res.data.data.records.forEach((item: any, index: any) => {
      item.key = index;
    });
    setData(res.data.data.records);
  };

  // 新增
  const [open, setOpen] = useState(false);
  // function onOk(value: any) {
  //   console.log("onOk: ", value);
  // }
  const onFinish = async (values: any) => {
    console.log("Success:", values);
    var res = await service.addWorker(values);
    console.log(res);
    if (res.data.code == 200) {
      notification.success({ message: res.data.msg });
      let newData = JSON.parse(JSON.stringify(data))
      newData.push(values)
      newData.forEach((item: any, index: any) => {
        item.key = index;
      });
      setData(newData)
    }
    setOpen(false);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <div>
      <div className="head">
        <Button type="default" onClick={() => setOpen(true)} icon={<PlusOutlined />}>
          增加客户
        </Button>

        <div className="right">
          <Radio.Group className="radio_list" value={size} onChange={onChange}>
            <Radio.Button onClick={()=>Workerlist()} value="small">全部</Radio.Button>
            <Radio.Button onClick={() => hanldeAll()} value="middle">
              启用
            </Radio.Button>
            <Radio.Button onClick={() => hanldeAllOff()} value="large">禁用</Radio.Button>
          </Radio.Group>
          <Search
            style={{ width: 220 }}
            placeholder="请输入客户名称"
            enterButton="搜索"
            onSearch={(value) => handleSerch(value)}
          />
        </div>
      </div>
      <Table columns={columns} dataSource={data} rowSelection={rowSelection} />
      <Modal title="新增业务员" footer={null} open={open} width={1000}>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="业务员名称"
            name="workerName"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="电话号码"
            name="workerTel"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="状态"
            name="workerState"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="职位"
            name="workerPosition"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="代号"
            name="workerCode"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="区域"
            name="workerAera"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="添加日期"
            name="workerAddtime"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" onClick={() => setOpen(false)}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              新增
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SalMent;
